<template>
  <view class="login-container">
    <view class="login-header">
      <text class="login-title">欢迎来到车辆综合服务平台商家端</text>
    </view>
    
    <view class="login-form">
      <view class="form-item">
        <input 
          class="input" 
          type="number" 
          placeholder="输入手机号"
          v-model="phoneNumber"
          maxlength="11"
        />
      </view>
      
      <view class="form-item">
        <input 
          class="input verification-input" 
          type="number" 
          placeholder="输入手机验证码"
          v-model="verificationCode"
          maxlength="6"
        />
        <button 
          class="verification-btn" 
          @click="getVerificationCode"
          :disabled="countdown > 0"
        >
          {{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
        </button>
      </view>
      
      <view class="register-link">
        <text @click="goToRegister">立即注册</text>
      </view>
      
      <button 
        class="login-btn" 
        @click="login"
      >
        登录
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phoneNumber: '',
      verificationCode: '',
      countdown: 0,
      timer: null
    };
  },
  
  methods: {
    // 获取验证码
    getVerificationCode() {
      // 简单的手机号验证
      if (!/^1[3-9]\d{9}$/.test(this.phoneNumber)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        });
        return;
      }
      
      // 模拟发送验证码
      uni.showToast({
        title: '验证码已发送',
        icon: 'success'
      });
      
      // 开始倒计时
      this.countdown = 60;
      this.startCountdown();
    },
    
    // 倒计时函数
    startCountdown() {
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(this.timer);
        }
      }, 1000);
    },
    
    // 登录
    login() {
      // 验证输入
      if (!this.phoneNumber) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        });
        return;
      }
      
      if (!this.verificationCode) {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none'
        });
        return;
      }
      
      // 模拟登录成功
      uni.showToast({
        title: '登录成功',
        icon: 'success'
      });
      
      // 登录成功后跳转到首页
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/index/index'
        });
      }, 1500);
    },
    
    // 跳转到注册页面
    goToRegister() {
      uni.navigateTo({
        url: '/pages/register/register'
      });
    }
  },
  
  // 页面卸载时清除定时器
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  padding: 0 40rpx;
  box-sizing: border-box;
  min-height: 100vh;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}

.login-header {
  margin-top: 120rpx;
  margin-bottom: 80rpx;
  text-align: center;
}

.login-title {
  font-size: 36rpx;
  color: #333333;
  font-weight: 600;
}

.login-form {
  width: 100%;
}

.form-item {
  margin-bottom: 40rpx;
  position: relative;
}

.input {
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
  font-size: 32rpx;
  color: #333333;
  border-bottom: 1rpx solid #e5e5e5;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.verification-input {
  width: 50%;
  display: inline-block;
}

.verification-btn {
  position: absolute;
  right: 0;
  top: 0;
  height: 96rpx;
  line-height: 96rpx;
  font-size: 28rpx;
  color: #1989fa;
  background-color: transparent;
  border: none;
  padding: 0 20rpx;
}

.verification-btn[disabled] {
  color: #999999;
}

.register-link {
  text-align: right;
  margin-bottom: 60rpx;
}

.register-link text {
  font-size: 28rpx;
  color: #1989fa;
}

.login-btn {
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
  font-size: 32rpx;
  color: #ffffff;
  background-color: #1989fa;
  border-radius: 48rpx;
  border: none;
}
</style>
    
      